<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>温湿度</title>

    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <!-- 引入样式 -->
<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="css/element-ui.css">

    <!-- 引入组件库 -->
    <script src="js/element-ui.js"></script>

    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <!--分页-->
    <el-row>
        <el-col :span="22">
            <el-pagination
                    :page-sizes="[60, 120, 180, 240]"
                    :current-page.sync="page.currentPage"
                    :page-size="page.pageSize"
                    :total="page.totalCount"
                    @current-change="initTable()"
                    @size-change="handleSizeChange"
                    layout="total, sizes, prev, pager, next, jumper"
            >
            </el-pagination>
        </el-col>

        <el-col :span="2">
            <template v-if="isShow">
                <el-button @click="initTable()" icon="el-icon-refresh-right" circle style="background-color:#E9EEF3;border: none;font-size: 30px"></el-button>
            </template>
            <template v-if="!isShow">
                <el-button icon="el-icon-loading" circle style="background-color:#E9EEF3;border: none;font-size: 30px"></el-button>
            </template>
        </el-col>
    </el-row>

    <!--表格内容-->
    <el-table
            ref="filterTable"
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName">
        <el-table-column
                type="index"
                prop="index"
                width="50"
                label="序号"
                align="center">
        </el-table-column>
        <el-table-column
                prop="productType"
                label="类型"
                align="center"
                :filters="allType"
                :filter-method="filterType"
                filter-placement="bottom-end">
        </el-table-column>
        <!--下拉筛选-->
        <el-table-column
                prop="address"
                label="地点"
                align="center"
                :filters="allAddress"
                :filter-method="filterTag"
                filter-placement="bottom-end">
        </el-table-column>

        <el-table-column
                prop="preValue"
                label="预设值"
                align="center">
        </el-table-column>

        <el-table-column label="操作" align="center">

            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="onEdit(scope.row)">编辑</el-button>
            </template>

        </el-table-column>
    </el-table>

    <!-- 修改 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="400px" top="5vh" center>
        <div class="info">
            <el-form :model="form" ref="Form" :rules="rules">
                <!-- 预设值 -->
                <el-row>
                    <el-form-item prop="preValue" label-width="0px">
                        <el-col span="1.5">预设值：</el-col>
                        <el-col span="20">
                            <el-input v-model="form.preValue" placeholder="请输入预设值" autocomplete="off"></el-input>
                        </el-col>
                    </el-form-item>
                </el-row>

            </el-form>
            <span class="dialog-footer">
                <!-- 提交按钮 -->
              <el-button type="primary" v-on:click="onSubmit('Form')" style="width: 100%">确认提交</el-button>
            </span>
        </div>
    </el-dialog>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow:true, /*true:显示刷新图标，false：显示缓冲图标*/
            tableData: [],
            allType: [
                {"text": "温度", "value": "温度"}, {"text": "湿度", "value": "湿度"},
                {"text": "烟雾", "value": "烟雾"}, {"text": "水压", "value": "水压"},
                {"text": "电流", "value": "电流"}, {"text": "电压", "value": "电压"}
            ],
            allAddress: [{"text": "A-01", "value": "A-01"}], /*地址筛选列表*/
            page: {
                currentPage: 1,
                pageSize: 60,
                totalCount: null
            },
            dialogFormVisible: false //控制表单是否显示
            , dialogTitle: "标题" //表单标题
            , form: { //表单数据
                productType: "",
                userName:"",
                number:"",
                weight: "",
                netReceipts: "",
                details: ""
            },
            rules: { //校验规则
                preValue: [
                    {required: true, message: '请输入预设值', trigger: 'blur'}
                ]
            }
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 4 === 3) {
                    return 'warning-row';
                } else if (rowIndex % 4 === 1) {
                    return 'success-row';
                }
                return '';
            },

            initTable() {
                /*显示缓冲图标*/
                this.isShow=false;
                axios.get('/details/getPage', {params: this.page})
                    .then(res => {
                        if (res.data.code === 2000) {
                            this.page.totalCount = res.data.data.total;
                            this.tableData = res.data.data.list
                            /*显示刷新图标*/
                            this.isShow=true;
                        }
                    })
            },
            // pageSize改变时
            handleSizeChange(val) {
                console.log(val)
                this.page.pageSize = val;
                this.initTable();
            },
            onEdit: function (row) {
                console.log(row);

                if (row != null) {
                    //点击修改按钮,显示表单
                    //row代表当前行数据
                    this.showDialog(row);
                }
            },
            showDialog(data) {
                if (data != null) {
                    this.dialogTitle = "修改:[ " + data.address + " ]的[ " + data.productType + " ]预设值";
                    this.form = data;
                    this.dialogFormVisible = true;
                }
            },
            onSubmit: function (form) { //添加/修改
                const objApp = this;
                this.$refs[form].validate(function (valid) {
                    if (valid) {
                        //表单提交处理
                        //组织参数
                        const params = new URLSearchParams();
                        params.append("productId", objApp.form.productId);
                        params.append("productType", objApp.form.productType);
                        params.append("preValue", objApp.form.preValue);

                        //此处请求的url可以时create/也可以是update
                        axios.post("/details/update", params).then(function (resp) {
                            const json = resp.data;
                            if (json.code == 2000) {
                                //前端弹窗提示
                                objApp.$message({
                                    message: "数据处理成功",
                                    type: "success"
                                });
                                //关闭编辑器
                                objApp.dialogFormVisible = false;
                                //跳转到当前页,刷新
                                objApp.initTable();
                            } else {
                                console.error(json);
                                //前端弹窗提示
                                objApp.$message.error({
                                    message: json.msg
                                })
                            }
                        })

                    }
                });
            },
            filterTag(value, row) {
                return row.address === value;
            },
            filterType(value, row) {
                return row.productType === value;
            },
            /*获取所有不重复地址*/
            getAllAddress() {
                const objApp = this;
                axios.get("/details/getAllAddress").then(function (resp) {
                    const json = resp.data;
                    if (json.code == 2000) {
                        objApp.allAddress = json.data;
                    } else {
                        console.error(json)
                    }
                });
            }

        },
        mounted() {
            this.initTable();
            this.dialogFormVisible = false;
            this.getAllAddress();
        }
    })
</script>
</html>